<template>
  <div class="CommonCard">
    <slot></slot>
    <div class="card-footer f-j-b f-a-c" v-if="footerLeft || footerRight">
      <div class="footer-left">{{ footerLeft }}</div>
      <div class="footer-right" @click="handleFooterRight">{{ footerRight }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  footerLeft: {
    type: String,
    default: ''
  },
  footerRight: {
    type: String,
    default: ''
  },
  itemData: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['handleFooterRight'])
const handleFooterRight = () => {
  console.log(props.itemData, ' props.itemData')

  emit('handleFooterRight', props.itemData)
}
</script>

<style scoped lang="less">
.CommonCard {
  background-color: #fff;
  padding: 16px;
  border: 1px solid #fff;
  border-radius: 14px;
  margin: 10px 0;
  .card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 15px;
    padding-top: 10px;
    margin-top: 10px;
    .footer-right {
      color: @themeColor;
    }
  }
}
</style>
